import { Space } from 'antd';
import { useAuthStore } from '@/store/useAuthStore';
import SeawatLineChart from './SeawayLineChart';
import { useGlobeData } from '../../hooks/useGlobeData';
import Title from '../Title';

export function SmallChart(props: {
  title:
    | '在途库存趋势'
    | '入库作业趋势'
    | '库内库存趋势'
    | '出库作业趋势';
  unit?: string;
  subTitle?: string;
  warehouseId: string;
}) {
  const { warehouseMapOfChartMap } = useGlobeData();

  const chartData = warehouseMapOfChartMap?.[props.warehouseId];

  const labels =
    chartData?.['仓库-上架趋势'].map(
      (i: any) => i.week.slice(2, 4) + '年' + i.week.slice(4) + '周',
    ) || [];

  const seriesDataMap = {
    在途库存趋势: [
      {
        name: '在途库存',
        data:
          chartData?.['仓库-在途库存趋势'].map((i: any) => i.quantity1) || [],
        areaTopColor: '#03B6C3',
        labelColor: '#D8D8D8',
        lineStyle: '#03B6C3',
      },
    ],
    入库作业趋势: [
      {
        name: '已收货量',
        data: chartData?.['仓库-收货趋势'].map((i: any) => i.quantity1) || [],
        areaTopColor: '#D8D8D8',
        labelColor: '#D8D8D8',
        lineStyle: '#D8D8D8',
      },
      {
        name: '已上架量',
        data: chartData?.['仓库-上架趋势'].map((i: any) => i.quantity1) || [],
        areaTopColor: '#03B6C3',
        labelColor: '#D8D8D8',
        lineStyle: '#03B6C3',
      },
    ],
    库内库存趋势: [
      {
        name: '库存',
        data:
          chartData?.['仓库-库内库存趋势'].map((i: any) => i.quantity1) || [],
        areaTopColor: '#E28F25',
        labelColor: '#D8D8D8',
        lineStyle: '#E28F25',
      },
    ],
    出库作业趋势: [
      {
        name: '接单量',
        data: chartData?.['仓库-接单趋势'].map((i: any) => i.quantity1) || [],
        areaTopColor: '#D8D8D8',
        labelColor: '#D8D8D8',
        lineStyle: '#D8D8D8',
      },
      {
        name: '已拣货量',
        data: chartData?.['仓库-拣货趋势'].map((i: any) => i.quantity1) || [],
        areaTopColor: '#E28F25',
        labelColor: '#D8D8D8',
        lineStyle: '#E28F25',
      },
      {
        name: '已出库量',
        data: chartData?.['仓库-出库趋势'].map((i: any) => i.quantity1) || [],
        areaTopColor: '#03B6C3',
        labelColor: '#D8D8D8',
        lineStyle: '#03B6C3',
      },
    ],
  };

  const dataset = seriesDataMap?.[props.title]?.map((i: any, index: number) => {
    // { show: jIndex !== 5 && jIndex !== 8 }
    const data = i.data;
    return {
      data,
      // data: i.data.map((j, jIndex) => ({value: j, label: {position: jIndex % 2 === 0 ? 'bottom' : 'top', distance: 8}})),
      label: i.name,
      areaTopColor: i.areaTopColor,
      labelColor: i.labelColor,
      lineStyle: i.lineStyle,
    };
  });

  return (
    <Space
      style={{
        padding: '12px 2px 10px 24px',
        background: '#15192d',
        borderRadius: 16,
        flex: 1,
        marginRight: '6px',
        marginTop: '8px'
      }}
      direction="vertical"
      size={12}
    >
      <Title
        title={props.title}
        unit={props.unit}
        subTitle={props.subTitle}
        titleFontSize={14}
      />
      <div
        style={{
          width: '330px',
          height: '190px',
          marginLeft: '-20px',
          marginTop: '-35px',
        }}
      >
        <SeawatLineChart
          labelFontSize={10}
          labels={labels}
          legendFontSize={12}
          dataset={dataset}
          title={props.title}
        />
      </div>
    </Space>
  );
}
